<!DOCTYPE html>
<html style="height: 100%;">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <title>手机应用安装</title>
  <style>
    body {
      background: #fff;
      text-align: center;
      color: #666;
      font-size: 0.9rem;
      margin: 0px;
    }

    .main {
      text-align: center;
    }

    .topimg {
      width: 100%;
      background-size: 100% auto;
    }

    .content {
      margin-top: 2rem;
    }

    .logo {
      width: 10rem;
      height: 10rem;

      background-repeat: no-repeat;
      background-position: center;
      background-size: auto 100%;
    }

    .title {
      color: #000000;
      font-size: 20px;
    }

    .sutitle {
      margin-top: 1rem;
      color: #666666;
      font-size: 16px;
    }

    .qrcode {
      width: 8rem;
      height: 8rem;
    }

    .cell {
      flex-wrap: wrap;
      display: flex;
      align-content: flex-center;
      align-items: center;
      justify-content: space-between;
      background: white;
      border-radius: 0.11rem;
      padding: 0px 30px;

      margin: 0 auto;
    }

    .cell div {
      width: 46%;
      background: #FF6666;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      border-radius: 0.9rem;
      margin-top: 1rem;
      padding: 0.3rem 0px;
    }

    .cellDiv {
      width: 46%;
      background: #FF6666;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      border-radius: 0.9rem;
      margin-top: 1rem;
      margin-left: .2rem;
      margin-right: .2rem;
      padding: 0.3rem 0;
    }

    .cell img {
      width: 1.5rem;
      height: 1.5rem;
      vertical-align: middle;
    }

    .cellImg {
      width: 1.5rem;
      height: 1.5rem;
      vertical-align: middle;
    }

    .down_txt {
      margin-left: 0.3rem;
      vertical-align: middle;
      color: white;
      font-size: 12px;
    }

    .iosTip {

      display: flex;
      word-wrap: break-word;
      height: 100%;
      color: white;
      text-align: center;
      padding-left: 30px;
      padding-right: 15px;
      padding-top: 15px;


      margin: auto 0;
      background: #000000d0;

    }

    .tipText {
      word-wrap: break-word;
      word-break: normal;
      flex: 1;
      padding-top: 20px;
      padding-right: 10px;
      padding-bottom: 20px;
    }

    .tipImg {
      flex: 30px 38px auto;
    }
  </style>
</head>

<body>
  <div id="iosTip" class="iosTip" style="display: none;background: #2f2f2f;">
    <div id="tipTv" class="tipText">点击右上角按钮，然后在弹出的菜单中，点击在Safari中打开，即可安装</div>
    <div class="tipImg">
      <img src="images/alert-arrow.png" style="width: 30px;height: 38px;">
    </div>
  </div>
  <div class="main" style="padding-bottom: 30px;">
    <img class="topimg" src="images/top_bg_mobile_ratio.png">
    <div class="content">
      <img class="logo" src="icon512.png">
      <div class="title">通化公积金</div>
      <div class="sutitle">手机扫描二维码安装</div>
      <img class="qrcode" src="images/qrcode.png">
      <!-- <div class="cell">
        <div onclick="location.href='http://www.ycdf91.cn/dfjy-static/resource/apk/app.apk'"><img
            src="images/android.png"><span class="down_txt">安卓手机安装</span></div>
        <span style="width: 8%;"></span>
        <div onclick="location.href='https://apps.apple.com/cn/app/%E5%A4%A7%E4%B8%B0%E5%B0%B1%E4%B8%9A/id1436567621'">
          <img src="images/ios.png"><span class="down_txt">苹果手机安装</span></div>
      </div> -->
      <div style=" display: flex;
  align-items: center;
  justify-content: center;">

        <div  id="androidDiv" class="cellDiv"  onclick="location.href='http://gjj.tonghua.gov.cn/apk/thgjj20200408.apk'"><img
            class="cellImg" src="images/android.png"><span class="down_txt">安卓手机安装</span></div>
        <div id="iosDiv" class="cellDiv"
          onclick="location.href='itms-services://?action=download-manifest&url=https://lovewuqiang.gitee.io/tonghuagjj/manifest.plist'">
          <img class="cellImg" src="images/ios.png"><span class="down_txt">苹果手机安装</span></div>
      </div>
    </div>
  </div>

</body>

<script>
  showTip();
  function showTip() {
    var u = navigator.userAgent;
    var isWechat = false;
    var isiOS = false;
    var isAndroid = false;
    if (u.indexOf('iPhone') > -1) {//苹果手机
      isiOS = true;
    }
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
      isAndroid = true;
    }
    u = u.toLowerCase();
    if (u.match(/MicroMessenger/i) == 'micromessenger') {
      isWechat = true;
    }

    if (isiOS && isWechat) {
      var iosTip = document.getElementById("iosTip");
      iosTip.style.display = "flex";
      var androidDiv = document.getElementById("androidDiv");
      androidDiv.style.display = "none";
    }
    if (isAndroid && isWechat) {
      var iosTip = document.getElementById("iosTip");
      iosTip.style.display = "flex";
      var tipText = document.getElementById("tipTv");
      tipText.innerText = "点击右上角按钮，然后在弹出的菜单中，点击在浏览器中打开，即可安装"
      var iosDiv = document.getElementById("iosDiv");
      iosDiv.style.display = "none";
    }

  }
</script>


</html>